
<template >
    <el-input
            :style="style"
            :id="id"
            :name="name"
            :bindProp="bindProp"
            :class="cls"
            v-model="value"
            @change="_controlOnUpdate"
            :placeholder="placeholder"
            >
        <i v-if="prefixIcon" @click="event2click" slot="prefix" class="prefixIcon"></i>
        <i v-if="suffixIcon" @click="event2click" slot="suffix" class="suffixIcon"></i>

    </el-input>
</template>

<script>
    exports = {
        templateType:'vue',
        data: function () {
            return {
                id:'',
                name:'',
                data:{},
                bindProp:'',
                value: '',
                style:'',
                cls:'',
                placeholder:'',
                prefixIcon:'',
                suffixIcon:''
            }
        },
        methods:{
            _controlOnUpdate:function(v,ov){
                var key = this.bindProp;
                this.onUpdate&&this.onUpdate(key,v,ov); //外部构造的方法调用
            },
            event2click:function(){ //icon图标点击事件
                this.onButtonClick&&this.onButtonClick(this); //外部构造的方法调用
            }
        }
    }
</script>

<style>

</style>